<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="Keywords" content="">
	<meta name="Description" content="">
	<title>0626-JS作业-链式操作-螺旋</title>
	<style type="text/css">
		html {
			font-family: "Microsoft YaHei";
		}
		body,p,ul{
			margin: 0;
		}
		ul{
			padding: 0;
			list-style: none;
		}
		.wrap{
			width: 200px;
			margin: 50px;
		}
		.box{
			width: 200px;
			height: 100px;
			background-color: #1b75ff;
		}
		.list li{
			width: 200px;
			height: 30px;
			margin-top: 10px;
			background-color: #ffbb00;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<div class="box"></div>
		<ul class="list">
			<li>
				<span></span>
			</li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
<script>
	var oHead = document.getElementsByTagName('head')[0],
		oStyle,oFns = {},
		aNodes = [];//存放元素节点
	
    fnQuery('.list li').fn1();
	
	function fnQuery(str){
		(function(){
		    if(document.querySelectorAll){//主流浏览器
                aNodes = document.querySelectorAll(str);
		    }else{//ie
		        oStyle = document.createElement('style');
		        oHead.appendChild(oStyle);//创建style标签 并添加到head中
			    document.aQuery = [];//在文档上创建一个自定义属性 来存储节点
			    //利用已经被废弃的expression命令 为ie低版本添加样式
			    oStyle.styleSheet.cssText = str+'{get:expression(document.aQuery.push(this))}';
			    window.scrollBy(0,0);//移动滚轮到初始位置 以启动expression命令
                oHead.removeChild(oStyle);//获取完毕后把刚刚新建的style标签删除 避免重复触发expression
			    aNodes = document.aQuery.splice(0,document.aQuery.length);
			    fnEach(function(val,num,arr){//遍历删除之前添加的get行内属性
			        val.style.removeAttribute('get');
			    });
		    }
		})();
		
		//遍历函数
		function fnEach(fn,arr){
		    arr = arr || aNodes;//如果不传arr 则arr=aNodes
		    for(var i=0;i<arr.length;i++){
		        fn(arr[i],i,arr);
		    }
		}
		
		oFns = {
            fn1: function () {
                console.log('链式操作');
            }
        };
		return oFns;
	}

</script>
</html>